<template>
    <div class="statistics_box flex-row">
        <div class="statistics_item" @click="goPage('/device/index')">
            <p class="label">设备总数</p>
            <p class="number">{{all}}</p>
        </div>
        <div class="statistics_item" @click="goPage('/device/index')">
            <p class="label">在线设备</p>
            <p class="number on">{{on}}</p>
        </div>
        <div class="statistics_item" @click="goPage('/liquid/tank/index')">
            <p class="label">报警储液罐</p>
            <p class="number warn">{{alarm}}</p>
        </div>
        <div class="statistics_item" @click="goPage('/liquid/tank/index')">
            <p class="label">待加液储液罐</p>
            <p class="number on">{{low}}</p>
        </div>
        <div class="statistics_item" @click="goPage('/liquid/list/index')">
            <p class="label">日平均消耗</p>
            <p class="number">{{day}}L</p>
        </div>
        <!-- <div class="statistics_item">
            <p class="label">在线人员</p>
            <p class="number on">1100</p>
        </div> -->
    </div>
</template>
<script>
import {
    remoteDeviceAllCount,
    remoteDeviceOnCount,
    remoteDeviceAlarmCount,
    remoteDeviceLowCount,
    remoteDeviceDayCount} from '@/api/home/index.js'
export default {
    name:"StatisticsBox",
    props:{
        info:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
        return{
            all:0,
            on:0,
            alarm:0,
            low:0,
            day:0
        }
    },
    created(){
        this.getAllSource();
    },
    methods:{
        async getAllSource(){
            try{
                let allResult = await remoteDeviceAllCount();
                let onResult = await remoteDeviceOnCount();
                let alarmResult = await remoteDeviceAlarmCount();
                let lowResult = await remoteDeviceLowCount();
                let dayResult = await remoteDeviceDayCount();
                this.all = allResult.data;
                this.on = onResult.data;
                this.alarm = alarmResult.data;
                this.low = lowResult.data;
                this.day = dayResult.data;
            }finally{

            }
        },
        goPage(path){
            this.$router.push({
                path:path
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.statistics_box{
    margin: 20px 0;
    align-items: center;
    .statistics_item{
        margin: 0 11px;
        flex: 1;
        padding: 15px 10px;
        border: 1px solid #004e97;
        text-align: center;
        background: #052766;
        &:first-child{
            margin-left: 0;
        }
        &:last-child{
            margin-right: 0;
        }
        p{
            margin: 0;
            padding: 0;
            line-height: 1;
        }
        .label{
            font-size: 14px;
            color: rgba($color: #9cf1f6, $alpha: .5);
        }
        .number{
            margin-top: 10px;
            font-size: 36px;
            color: #9cf1f6;
            &.warn{
                color: #ffc622;
            }
            &.on{
                color: #00fd96;
            }
        }
    }
}
</style>